<template>
  <div class="projectDetail-container">
    <el-row>
      <el-col :span="24">
        <el-tabs v-model="activeName"
                 type="card"
                 class="project-tabs">
          <el-tab-pane label="基本信息"
                       class="basic-info"
                       name="first">
            <ProjectInfo></ProjectInfo>
          </el-tab-pane>
          <el-tab-pane label="构件列表"
                       name="second">
            <doComponList></doComponList>
          </el-tab-pane>
          <el-tab-pane label="项目统计"
                       name="third">项目统计</el-tab-pane>
          <el-tab-pane label="应力数据监控"
                       name="fourth"
                       class="stress-tabs">
            <el-row :gutter="24">
              <el-col :span="24"
                      class="top-box">
                <el-col :span="3"
                        align="left">
                  <el-button type="primary">查看曲线图</el-button>
                </el-col>
                <el-col :span="10"
                        align="right">
                  <el-select v-model="value"
                             class="normal-input"
                             placeholder="传感器类型">
                    <el-option label="全部类型"
                               value=""> </el-option>
                    <el-option v-for="item in normalList"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4"
                        align="right">
                  <el-select v-model="value"
                             class="normal-input"
                             placeholder="传感器规格">
                    <el-option label="全部规格"
                               value=""> </el-option>
                    <el-option v-for="item in normalList"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4"
                        align="right">
                  <el-input placeholder="传感器编号"></el-input>
                </el-col>
                <el-col :span="3"
                        align="right">
                  <el-button type="primary"
                             icon="el-icon-search">查询</el-button>
                </el-col>
              </el-col>
              <el-col :span="24">
                <el-table :highlight-current-row='true'
                          border
                          :header-cell-style="{background:'#f5f5f5'}"
                          :data='stressDataTable.list'>
                  <el-table-column prop='check'
                                   label='选择'
                                   align='center'
                                   show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column prop='number_id'
                                   label='编号ID'
                                   align='center'
                                   show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column prop='sensor_id'
                                   label='传感器ID'
                                   align='center'
                                   show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column prop='sensor_type'
                                   label='传感器类型'
                                   align='center'
                                   show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column prop='sensor_format'
                                   label='传感器规格'
                                   align='center'
                                   show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column prop="own_member"
                                   label='所属构件'
                                   align='center'
                                   show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column prop="axial_force"
                                   label='轴力(KN)'
                                   align='center'
                                   show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column label='频率(Hz²)'
                                   align='center'
                                   show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column label='温度'
                                   align='center'
                                   show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column label='电量比例'
                                   align='center'
                                   show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column label='RSSI信号值'
                                   align='center'
                                   show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column label='采样时间'
                                   align='center'
                                   show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column label='压力报警状态'
                                   align='center'
                                   show-overflow-tooltip>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="短信提示"
                       name="fifth">
            <el-table :highlight-current-row='true'
                      border
                      :header-cell-style="{background:'#f5f5f5'}"
                      :data='smsTipsTable.list'>
              <el-table-column prop='no'
                               label='序号'
                               align='center'
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop='username'
                               label='姓名'
                               align='center'
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop='user'
                               label='角色'
                               align='center'
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop='own_unit'
                               label='所属单位'
                               align='center'
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop='sms_count'
                               label='短信数量'
                               align='center'
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column label='操作'
                               align='center'
                               show-overflow-tooltip>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ProjectListApi } from '@/services/ProjectCenter'
import doComponList from '@/pages/ProjectCenter/ComponentList/doComponList'
import ProjectInfo from '@/pages/ProjectCenter/components/ProjectInfo'
export default {
  data () {
    return {
      activeName: 'first',
      formInline: {
        user: ''
      },
      stressDataTable: {
        list: [
          {
          }
        ],
        total_page: 0,
        total_count: 0
      },
      smsTipsTable: {
        list: [
          {
          }
        ],
        total_page: 0,
        total_count: 0
      },
      value: '',
      normalList: [],
      buildList: [
        {
          value: '1',
          label: '建设单位'
        }
      ],
      projectDetail: {

      }
    }
  },
  components: {
    doComponList,
    ProjectInfo
  },
  methods: {
    getProjectDetail () {
      ProjectListApi.getProjectDetail({
        data: {
          id: 4
        }
      }).then(res => {
        console.log(res, 'get project detail')
      }, err => {
        console.log(err)
      })
    }
  },
  created () {
    this.getProjectDetail()
  }
}
</script>

<style scoped lang='scss'>
.projectDetail-container {
  padding: 20px;
  /deep/ .project-tabs {
    .is-active {
      background: #fff;
      color: #303133;
    }
    .el-tabs__item:hover {
      color: #303133;
    }
    .basic-info {
      .normal-item {
        width: 48%;
        .normal-input {
          width: 420px;
        }
      }
    }
    .stress-tabs {
      .top-box {
        background: #fff;
        margin-bottom: 20px;
        padding: 15px;
      }
    }
  }
}
</style>
